package main.flex.skin
{
	import flash.display.CapsStyle;
	import flash.display.GradientType;
	import flash.display.LineScaleMode;
	import flash.filters.BitmapFilterQuality;
	import flash.filters.DropShadowFilter;
	import flash.filters.GlowFilter;
	
	import main.flex.conf.MainConf;
	
	import mx.graphics.RoundedRectangle;
	import mx.skins.ProgrammaticSkin;

	public class NavigationButtonSkin extends ProgrammaticSkin
	{
		import flash.display.Graphics;
		import flash.geom.Rectangle;
		import mx.graphics.GradientEntry;
		import mx.graphics.LinearGradient;
 
		protected override function updateDisplayList( unscaledWidth : Number, unscaledHeight : Number ) : void
		{
		   	super.updateDisplayList( unscaledWidth, unscaledHeight );
			var w		: Number = unscaledWidth;
			var h		: Number = unscaledHeight;
		 
			// hold the values of the gradients depending on button state
			var color	: Number;
			var color2	: Number;				
		 
			var fill	: LinearGradient = new LinearGradient();
		 
			// reference the graphics object of this skin class
			var g		: Graphics = graphics;
			g.clear();				
		 
			//	which skin is the button currently looking for? Which skin to use?
			switch ( name )
			{
				case "upSkin":
					color 		= MainConf.COLOR_BASE_GREEN;
					color2 		= MainConf.COLOR_BASE_GREEN;
					break;
				case "overSkin":
					color 		= MainConf.COLOR_BASE_GREEN;
					color2 		= MainConf.COLOR_DARK_GREEN;
					break;
				case "downSkin":
					color 		= MainConf.COLOR_BASE_BLUE;
					color2 		= MainConf.COLOR_DARK_BLUE;
					break;
				case "disabledSkin":
					color 		= MainConf.COLOR_BASE_GREY;
					color2 		= MainConf.COLOR_DARK_GREY;
					break;
				case "focus":
					color 		= MainConf.COLOR_BASE_BLUE;
					color2 		= MainConf.COLOR_DARK_BLUE;
					break;
			}
			
			switch( name )
			{
				case "focus":
					g.lineStyle( 
									3,
									MainConf.COLOR_BASE_BLUE,
									1,
									true,
									LineScaleMode.NORMAL,
									CapsStyle.ROUND
									);
					g.endFill();
					break;
				default:
					break;					
			}
			
			g.beginGradientFill(
									GradientType.LINEAR,
									[
									color,
									color2
									],
									[
									( ( name == "focus" ) ? 0 : 1 ),
									( ( name == "focus" ) ? 0 : 1 )
									],
									[
									.1,
									.6
									]
									);
			g.moveTo( 
						MainConf.ELLIPSE_ACCOUNT_BUTTON,
						0
						);
			g.lineTo( 
						( w - MainConf.ELLIPSE_ACCOUNT_BUTTON ),
						0
						);
			g.curveTo(
						w,
						0,
						w,
						( h / 2 )
						);
			g.curveTo(
						w,
						h,
						( w - MainConf.ELLIPSE_ACCOUNT_BUTTON ),
						h
						);
			g.lineTo(
						MainConf.ELLIPSE_ACCOUNT_BUTTON,
						h
						);
			g.curveTo(
						0,
						h,
						0,
						( h / 2 )
						);
			g.curveTo(
						0,
						0,
						MainConf.ELLIPSE_ACCOUNT_BUTTON,
						0
						);
			g.endFill();
			
			// if we're not showing the down skin, show the shadow. Otherwise hide it on the "down state" to look like it's being pressed
			if( name != "downSkin" && name != "focus" )
				filters = [
							new DropShadowFilter(
													1,
													45,
													MainConf.COLOR_BLACK,
													.2
													)
							];
			if( name == "downSkin" )
				filters = [
							new GlowFilter(
											MainConf.COLOR_WHITE,
											.2,
											10,
											6,
											2,
											BitmapFilterQuality.MEDIUM,
											true
											)
							];
		 }	
	}
}